Angular Material এর MatStepper কম্পোনেন্ট একটি অত্যন্ত শক্তিশালী টুল, যা স্টেপ ফর্ম তৈরি করতে ব্যবহৃত হয়। এটি ব্যবহারকারীদের একাধিক ধাপের মাধ্যমে ডেটা পূরণ করার জন্য সহায়তা করে। প্রতিটি ধাপে ইনপুট বা ফর্ম ফিল্ড থাকতে পারে, এবং একটি ধাপ থেকে অন্য ধাপে ন্যাভিগেট করতে সহায়তা করে। Angular Material স্টেপার কম্পোনেন্টে আপনি স্টেপ ভ্যালিডেশন এবং ন্যাভিগেশন সম্পূর্ণ কাস্টমাইজ করতে পারেন।

স্টেপ ভ্যালিডেশন এবং ন্যাভিগেশন কাস্টমাইজ করার জন্য পদক্ষেপ

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

প্রথমে, MatStepperModule, ReactiveFormsModule, এবং MatInputModule ইমপোর্ট করতে হবে আপনার app.module.ts ফাইলে:

import { MatStepperModule } from '@angular/material/stepper';
import { ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    MatStepperModule,
    ReactiveFormsModule,
    MatInputModule
  ]
})
export class AppModule {}

২. HTML টেমপ্লেটে স্টেপার তৈরি করা

এখন আপনি MatStepper ব্যবহার করে একটি স্টেপার তৈরি করতে পারবেন। নীচে একটি সাধারণ স্টেপ ফর্ম উদাহরণ দেওয়া হয়েছে:

<mat-horizontal-stepper [linear]="isLinear" #stepper>
  <mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Personal Information</ng-template>
      <mat-form-field>
        <mat-label>First name</mat-label>
        <input matInput formControlName="firstName">
      </mat-form-field>
      <mat-form-field>
        <mat-label>Last name</mat-label>
        <input matInput formControlName="lastName">
      </mat-form-field>
      <div>
        <button mat-button matStepperNext [disabled]="!firstFormGroup.valid">Next</button>
      </div>
    </form>
  </mat-step>

  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Address</ng-template>
      <mat-form-field>
        <mat-label>Street Address</mat-label>
        <input matInput formControlName="street">
      </mat-form-field>
      <mat-form-field>
        <mat-label>City</mat-label>
        <input matInput formControlName="city">
      </mat-form-field>
      <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext [disabled]="!secondFormGroup.valid">Next</button>
      </div>
    </form>
  </mat-step>

  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    <p>You are done</p>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="onSubmit()">Submit</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

এখানে:

• mat-horizontal-stepper: এটি একটি হরিজন্টাল (অনুভূমিক) স্টেপার তৈরি করে।
• [linear]="isLinear": এটি স্টেপারের জন্য লিনিয়ার (অর্থাৎ এক ধাপ একে একে) আচরণ সক্রিয় করে।
• mat-step: প্রতিটি ধাপের জন্য এটি একটি ট্যাগ, যেখানে ফর্ম কন্ট্রোল থাকে।
• matStepLabel: এটি প্রতিটি স্টেপের ট্যাগের লেবেল তৈরি করে।

৩. টাইপস্ক্রিপ্ট ফাইলে ফর্ম কন্ট্রোল এবং স্টেপ ভ্যালিডেশন

ReactiveFormsModule ব্যবহার করে ফর্ম কন্ট্রোল এবং স্টেপ ভ্যালিডেশন কনফিগার করতে হবে। এখানে একটি উদাহরণ দেওয়া হলো:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-stepper',
  templateUrl: './stepper.component.html',
  styleUrls: ['./stepper.component.css']
})
export class StepperComponent implements OnInit {

  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;
  isLinear = true;

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required]
    });

    this.secondFormGroup = this._formBuilder.group({
      street: ['', Validators.required],
      city: ['', Validators.required]
    });
  }

  onSubmit() {
    // ফর্ম সাবমিট করার লজিক
    console.log("Form Submitted!");
  }
}

এখানে:

• firstFormGroup এবং secondFormGroup হলো দুটি ফর্ম গ্রুপ যা প্রতিটি স্টেপের জন্য ফর্ম কন্ট্রোল ধারণ করে।
• Validators.required: এটি প্রতিটি ইনপুট ফিল্ডের জন্য ভ্যালিডেশন চালায়, যাতে ব্যবহারকারী একটি ইনপুট প্রদান করে।

৪. ন্যাভিগেশন (Back and Next) কাস্টমাইজ করা

Angular Material Stepper আপনাকে প্রতিটি স্টেপের মধ্যে Next এবং Back বোতাম দ্বারা নেভিগেট করার সুযোগ দেয়। এই বোতামগুলো matStepperNext এবং matStepperPrevious ডিরেকটিভ দ্বারা নিয়ন্ত্রিত হয়।

<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>

এছাড়া, disabled অ্যাট্রিবিউট ব্যবহার করে আপনি প্রতিটি স্টেপের জন্য ভ্যালিডেশন নিশ্চিত করতে পারেন।

<button mat-button matStepperNext [disabled]="!firstFormGroup.valid">Next</button>

এখানে, firstFormGroup.valid শুধুমাত্র তখনই Next বোতামটি সক্রিয় করবে যখন প্রথম ধাপের ইনপুট ফিল্ডগুলির মান সঠিক হবে।

Angular Material Stepper একটি শক্তিশালী এবং ব্যবহারকারীবান্ধব টুল, যা ব্যবহারকারীকে একাধিক ধাপে ডেটা পূর্ণ করতে সহায়তা করে। এটি সহজেই Reactive Forms এর মাধ্যমে স্টেপ ভ্যালিডেশন এবং ন্যাভিগেশন কাস্টমাইজ করার সুবিধা দেয়। Next এবং Back বোতামগুলির মাধ্যমে স্টেপের মধ্যে নেভিগেট করা সহজ, এবং স্টেপের উপর ভিত্তি করে ভ্যালিডেশন সরবরাহ করা যায়, যা ইউজার ইন্টারফেসকে আরও কার্যকরী এবং সুন্দর করে তোলে।